<script setup lang='ts'>
import { onMounted, reactive, ref } from 'vue';
import { systemIpDenyApi as systemApi } from '@/api/controller';
import { ToastSuccess, Toastloading } from '@/utils/public';
import { getPlayEndTime, getDateArray } from '@/utils'
import Pagination from "@/components/Pagination/index.vue";
import { ElMessageBox } from 'element-plus';
const configFormRef = ref()
const action = reactive({
  total: 0,
  list: [] as any[],
  dateArr: getDateArray('ymdhis') as Array<number>
})
const listQuery = reactive({
  page: 1,
  limit: 20,
  admin_id: "",
})
const handleSerach = () => {
  listQuery.page = 1
  getList()
}


const getList = async () => {
  const loading = Toastloading()
  const timeObi = getPlayEndTime(action.dateArr)
  const res = await systemApi.ipOptList({
    start_time:timeObi.playTime,
      end_time:timeObi.endTime,
      ...listQuery})
  loading.close()
  const { data = [], total = 0 } = res.data
  action.total = total
  action.list = data
}
onMounted(() => {
  getList()
})
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">管理员ID：</div>
          <el-input v-model="listQuery.admin_id" clearable placeholder="请输入管理员ID" class="xm-width200" />
        </div>

        <div class="labelItem">
          <div class="label">日期：</div>
          <el-date-picker
            v-model="action.dateArr"
            type="datetimerange"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>

        <div class="labelItem">
          <el-button type="primary" @click="handleSerach">查询</el-button>
        </div>
      </div>
    </div>
    <el-table class="xm-main xm-TableCenter" :data="action.list" border>
      <el-table-column min-width="100" prop="admin_id" label="ID" />
      <el-table-column min-width="100" prop="admin_name" label="账号" />
      <el-table-column min-width="100" prop="ip" label="IP" />
      <el-table-column min-width="100" prop="created_at" label="时间" />
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
  </div>
</template>